@charset "UTF-8";
@font-face {
	font-family: FotonType-L;
	src: url("../fonts/FotonType-Light.ttf");
}
@font-face {
	font-family: FotonType-M;
	src: url("../fonts/FotonType-Medium.ttf");
}
@font-face {
	font-family: FotonType-B;
	src: url("../fonts/FotonType-Bold.ttf");
}
body{font-family: FotonType-L;overflow-x: hidden;}
.wrap {max-width: 1600px;width: 86%;margin: 0 auto;}
.commPad{margin-top: 70px;}
.commMar1{padding-top: 56px;}
.header{width: 100%; background: #000000;height: 70px;position: fixed;top: 0;left: 0;padding: 0 48px;display: flex;justify-content: space-between;align-items: center;z-index: 9;}
.header .logo{display: block;height: 34px;}
.header .logo img{display: block;height: 100%;}
.header .logo2{ position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.menuBtn{position: relative;z-index: 9;width: 35px;height: 38px;padding: 8px 0 0;cursor: pointer;margin-right: 5px;transition: .3s;-ms-transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;margin-right: 26px;}
.menuBtn span{display: block;height: 2px;background-color: #fff;margin: 5px auto;border-radius: 2px;transition: .3s;-ms-transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;width: 20px;}
.menuBtn.open span{display: none;margin: 0;position: absolute;left: 10px;top: 50%;width: 20px;}
.menuBtn.open span:first-child{display: block;transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.menuBtn.open span:last-child{display: block;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
.header .left{display: flex;align-items: center;}
.header .left .nav{display: flex;}
.header .left .nav a{ display: block; font-family: FotonType-M; font-size: 16px; color: #ffffff; line-height: 70px; padding: 0 26px; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.header .left .nav a:hover{ transform: translateY(4px); -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); -o-transform: translateY(4px); }
.navBox{ height: calc(100vh - 70px); padding: 0 66px; background: rgba(0,0,0,.9); position: fixed; left: -100%; top: 70px; z-index: 9; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.navBox .item{border-bottom: 1px solid rgba(255,255,255,.2);display: flex;padding: 18px 50px 18px 0;}
.navBox .item:last-child{border-bottom: 0;}
.navBox .item h3{width: 200px; font-size: 16px;color: #fff;line-height: 30px;font-weight: normal;margin-top: 42px;}
.navBox .item h3 a{color: #fff;}
.navBox .item .aBox a{ display: block; font-size: 14px; color: #fff; line-height: 30px; margin: 20px 0; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.navBox .item .aBox a:hover{ transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }
.navBox.active{left: 0;}

.downBox{ width: 100vw; background: rgba(0,0,0,.85); position: fixed; top: -50px; left: 0; z-index: 10; opacity: 0; visibility: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease;height: 0;overflow: hidden;}
.downBox.active{opacity: 1;visibility: visible;top: 70px;height: calc(100vh - 70px);}
.downBox .downTit{display: flex;align-items: center;justify-content: center;padding: 56px 0;border-bottom: 2px solid rgba(255,255,255,.2);}
.downBox .downTit span{font-size: 18px;color: #fff;line-height: 30px;position: relative;margin: 0 50px;cursor: pointer;}
.downBox .downTit span::after{ content: '';display: block; width: 56px; height: 4px; background: #49c6e5; position: absolute; left: 50%;  bottom: -8px;margin-left: -28px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;opacity: 0;visibility: hidden; }
.downBox .downTit span.active{font-weight: bold;}
.downBox .downTit span.active::after{opacity: 1;visibility: visible;}
.downBox .con{height: 0;overflow: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; opacity: 0; visibility: hidden; transform: translateY(60px); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); }
.downBox .con.active{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0);height: auto ;padding-bottom: 10px;}
.downBox .con .items{display: flex;justify-content: center;flex-wrap: wrap;}
.downBox .con .item{ width: 20%; margin-top: 20px; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.downBox .con .item img{display: block;height: 200px;margin: 0 auto;}
.downBox .con .item h3{font-size: 24px;color: #fff;line-height: 30px;text-align: center;margin-top: 20px;}
.downBox .con .item .aBox{display: flex;justify-content: center;align-items: center;margin-top: 40px;}
.downBox .con .item .aBox a{ display: block; width: 108px; font-family: FotonType-M; font-size: 14px; color: #fff; line-height: 30px; border: 2px solid #fff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; text-align: center; margin: 0 15px; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.downBox .con .item .aBox a:hover{background: #fff;color: #000000;}
.downBox .con .item:hover{ transform: translateY(10px); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); }
.downBox .close{width: 46px;display: block;cursor: pointer;position: absolute;left: 0;right: 0;bottom: 60px;margin: 0 auto;}

.footer{width: 100%; background: #000000;padding: 50px 60px;display: flex;justify-content: space-between;} 
.footer .left,.footer .right{width: 48%;}
.footer .left .aBox{display: flex;align-items: center;}
.footer .left .aBox a{display: block;font-size: 14px;color: #fff;line-height: 16px;padding: 0 20px;border-right: 1px solid #fff;}
.footer .left .aBox a:last-child{border-right: 0;}
.footer .left .aBox a:first-child{padding-left: 0;}
.footer .left .aBox a:hover{font-weight: bold;}
.footer .left p{font-size: 14px;color: rgba(255,255,255,.5);line-height: 20px;margin-top: 18px;}
.footer .left p a{color: rgba(255,255,255,.5);}
.footer .right p{font-size: 14px;color: #fff;line-height: 20px;text-align: right;}
.footer .right p span{display: inline-block;vertical-align: top;margin-left: 38px;}
.footer .ewmBox{display: flex;align-items: center;justify-content: flex-end;margin-top: 18px;}
.footer .ewmBox .item{position: relative;margin-left: 20px;}
.footer .ewmBox .tit{display: flex;align-items: center;font-size: 14px;color: #fff;opacity: .5;cursor: pointer;}
.footer .ewmBox .tit img{display: block;width: 20px;margin-right: 5px;}
.footer .ewmBox .ewm{ width: 200px; position: absolute; left: 50%; bottom: 26px; margin-left: -100px; padding: 5px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; background: #fff; opacity: 0; visibility: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease;box-shadow: 0 5px 20px rgba(0,0,0,.1); }
.footer .ewmBox .ewm img{display: block;width: 100%;}
.footer .ewmBox .ewm::after{content: '';border-left: 10px solid transparent ;border-right: 10px solid transparent;border-top: 10px solid #fff;position: absolute;left: 50%;bottom: -10px;margin-left: -10px;}
.footer .ewmBox .item:hover .ewm{opacity: 1;visibility: visible;bottom: 36px;}
.footer .ewmBox .item:hover .tit{opacity: 1;}

.fixdRight{position: fixed;right: 20px;top: 20%;z-index: 9;}
.fixdRight a{width: 50px; height: 50px; background: rgba(0,0,0,.7); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 10px 0;position: relative; }
.fixdRight a img{position: relative;z-index: 2;}
.fixdRight a:hover{background: rgba(0,0,0,.7); }
.fixdRight .icon1:hover,.fixdRight .icon2:hover,.fixdRight .icon3:hover,.fixdRight .icon6:hover,.fixdRight .icon7:hover{background: transparent;}
.fixdRight a .sp{ display: block; font-size: 14px; color: #fff; line-height: 50px; opacity: 1; width: 140px;height: 50px; position: absolute; right: -50px; top: 0; background: rgba(0,0,0,.7); padding-right: 50px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; opacity: 0;visibility: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease;text-align: right;visibility: hidden; }
.fixdRight a:hover .sp{opacity: 1;visibility: visible;right: 0;}
.fixdRight .ewmBox{ position: absolute; right: 76px; top: 50%; display: flex; background: #000000; padding: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.fixdRight .ewmBox::after{content: '';border-top: 10px solid transparent ;border-bottom: 10px solid transparent;border-left: 10px solid #000000;position: absolute;right: -10px;top: 50%;margin-top: -10px;}
.fixdRight .ewmBox li{margin: 0 10px;}
.fixdRight .ewmBox span{font-size: 14px;color: #fff; display: block;text-align: center;}
.fixdRight .ewmBox img{display: block;width: 100px;margin-top: 10px;}
.fixdRight .icon4:hover .ewmBox{opacity: 1;visibility: visible;right: 66px;}
.xzBox{width: 100vw;height: calc(100vh - 70px);position: fixed;top: 70px;left: 0;background: #000000;padding: 8vw 7vw 0;border-top: 2px solid rgba(255,255,255,.2);z-index: 10;opacity: 0;visibility: hidden;}
.xzBox.active{ opacity: 1; visibility: visible; animation: rotateInDownRight 500ms ease; -webkit-animation: rotateInDownRight 500ms ease; }
.xzBox .box{display: flex;justify-content: space-between;}
.xzBox .left{width: 370px;padding-top: 20px;}
.xzBox .left h3{font-size: 24px;color: #fff;font-family: FotonType-M;}
.xzBox .left p{font-size: 16px;color: #fff;line-height: 20px;margin-top: 15px;}
.xzBox .left img{ display: block; width: 200px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px;margin-top: 50px; }
.xzBox .right{width: 60%;display: flex;justify-content: space-between;align-items: flex-start;}
.xzBox .right img{ display: block; width: 30.33%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }
.xzBox .close{width: 40px;height: 40px;display: block;cursor: pointer;position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 4vh;}

.crumbs{padding: 10px 30px;font-size: 14px;color: #000000;line-height: 26px;background: #fff;}
.crumbs a{color: #000000;}
.crumbs a:hover{font-weight: bold;}
.pages{display: flex;align-items: center;justify-content: center;}
.pages a{min-width: 36px; display: block;font-size: 18px;color:  #000;line-height: 36px;text-align: center;margin: 0 5px;background: #dfe0e1;}
.pages a.active,.pages a:hover{background: #7c7c7d;color: #fff;}

.commTit{text-align: center;}
.commTit h3{font-size: 48px;color: #000000;line-height: 1;font-family: FotonType-M;letter-spacing: 2px;font-weight: normal;}
.commTit span{font-size: 18px;color: rgba(0,0,0,.3);line-height: 26px;display: block;font-family: FotonType-M;text-transform: uppercase;letter-spacing: 4px;}

.csBox{width: 100%;height: 100%;background: rgba(0,0,0,.8);position: fixed;top: 0;left: 0;z-index: 99;display: none;}
.csBox .img{overflow-y: auto;width: 86vw;max-height: 82vh;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background: #ffffff; }
.csBox .img img{display: block;max-width: 100%;height: auto;}
.csBox .close{display: block;width: 40px;position: absolute;right: 50px;top: 50px;cursor: pointer;}

.csBox2{width: 100%;height: 100%;background: rgba(0,0,0,.8);position: fixed;top: 0;left: 0;z-index: 99;display: none;}
.csBox2 .img{overflow-y: auto;min-width: 1200px; max-width: 86vw;max-height: 82vh;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background: #ffffff; }
.csBox2 .img img{display: block;max-width: 100%;height: auto;}
.csBox2 .close{display: block;width: 40px;position: absolute;right: 50px;top: 50px;cursor: pointer;}

.parameter .parameter-content { margin-top: 30px; }

.parameter-content { border-top: 1px solid #dcdcdc; }
.parameter-content .parameter-mintitle { height: 60px; line-height: 60px; box-sizing: border-box; border: 1px solid #dcdcdc; border-top: none; background-color: #f5f5f5; padding: 0 20px; position: relative; font-size: 18px; font-weight: 800; cursor: pointer; }
.parameter-content .parameter-mintitle b { width: 28px; height: 28px; background: url("https://van.foton.com.cn/van/static/images/index/icon/iconbottom.png") no-repeat; background-size: 100% 100%; position: absolute; right: 20px; top: 15px; cursor: pointer; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
.parameter-content .parameter-container {  box-sizing: border-box; overflow: hidden; border-right: 1px solid #dcdcdc; }
.parameter-content .parameter-container li {overflow: hidden;font-size:14px;text-overflow: ellipsis;white-space: nowrap;padding: 0 10px; height: 50px; line-height: 50px; box-sizing: border-box; float: left; width: 30%; border-left: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; text-align: center;font-family: FotonType-M; }
.parameter-content .parameter-container .parameter-name { width: 20%; background-color: #f5f5f5; font-size: 15px;}



.tipBox{width: 100%;height: 100%;background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;z-index: 99999;display: none;}
.tipBox .p{ padding: 8px 30px;font-family: FotonType-M; font-size: 16px; color: #000; line-height: 30px; text-align: center; background: #fff; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }

.loading{width: 100%;height: 100%;background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;z-index: 99999;display: none;}
.loading img{width: 40px;height: 40px;display: block;position: fixed;top: 50%;left: 50%;margin-left: -20px;margin-top: -20px;}





@media only screen and (max-width:1600px){
	.pages a{font-size: 16px;}
}
@media only screen and (max-width:1440px){
	.xzBox .left h3{font-size: 20px;}
	.xzBox .left p{font-size: 14px;}
	.xzBox .left img{width: 180px;}
	.downBox .downTit span{font-size: 16px;}
	.downBox .con .item h3{font-size: 20px;}
	.commTit h3{font-size: 40px;}
	.commTit span{font-size: 16px;}
	.pages a{font-size: 14px;}
}
@media only screen and (max-width:1366px){
	.downBox .downTit{padding: 40px 0;}
	.downBox .con .item img{height: 180px;}
	.downBox .con .item h3{font-size: 18px;}
	.commTit h3{font-size: 36px;}
	.commTit span{font-size: 14px;}
	.csBox .img{min-width: 1000px;}
}
@media only screen and (max-width:1199px){
	.xzBox .left{width: 330px;}
	.xzBox .left img{width: 150px;margin-top: 36px;}
}
@media only screen and (max-width:992px){
	
}